<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- bootstrap样式文件 -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
    <!-- bootstrap-table样式文件 -->
    <link rel="stylesheet" href="../bootstrap-table/bootstrap-table.css" />
    <!-- bootstrap-validator样式文件 -->
    <link rel="stylesheet" href="../bootstrap-validator/css/bootstrapValidator.css" />
    <!-- jquery -->
    <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
    <!-- bootstrap的js文件 -->
    <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
    <!-- bootstrap-table的js文件 -->
    <script type="text/javascript" src="../bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <!-- bootstrap-validator的js文件 -->
    <script type="text/javascript" src="../bootstrap-validator/js/bootstrapValidator.js"></script>
    <script type="text/javascript" src="../bootstrap-validator/js/language/zh_CN.js"></script>

    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript">
        $(function () {
            initValidator();
        })
        function initValidator(){
            $("#myForm").bootstrapValidator({
                //排除验证，不做验证
                // excluded: [':disabled', ':hidden', ':not(:visible)'],
                //验证时使用的图标
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok', //验证成功
                    invalid: 'glyphicon glyphicon-remove', //验证失败
                    validating: 'glyphicon glyphicon-refresh' //正在验证
                },
                //及时验证
                live: "enabled",
                //在表单元素中添加验证规则
                fields: {
                    //每个表单组件的验证规则是一个键值对，其中key为表单元素的name属性值，其value为验证规则json对象
                    username: {
                        //当前表单元素验证失败的默认提示
                        // message: "用户名验证失败",
                        //验证器
                        validators: {
                            //非空验证器
                            notEmpty: {
                                // message: "用户名不能为空"
                            },
                            //字符串长度验证器
                            stringLength: {
                                min: 2,
                                max: 8,
                                message: "用户名长度必须为2到8位之间"
                            },
                            //正则表达式验证器
                            regexp: {
                                regexp: /^[0-9a-zA-Z_]+$/,
                                message: "用户名只能包含大小写字母、数字和下划线"
                            },
                            //不同验证器：相同验证失败，不同验证成功
                            different: {
                                field: "password",
                                message: "用户名与密码不能相同"
                            },
                            //远程验证器：可向服务器发送异步请求，向服务器发送请求时默认将当前表单元素的值提交
                            //              服务器响应回json数据中必须包含"valid": true成功"valid": false失败
                            remote: {
                                //远程访问地址
                                url: "../usernameIsExist",
                                //请求方式
                                type: "post",
                                message: "用户名已存在",
                                //延迟验证：每输入一个字符都会向服务器发送ajax请求，服务器压力过大，单位毫秒
                                delay: 2000,
                                //自定义请求参数
                                data: {
                                    test: "hello"
                                }
                            }
                        }
                    },
                    password : {
                        validators: {
                            notEmpty: {
                            },
                            different: {
                                field: "username",
                                message: "密码与用户名不能相同"
                            },
                            //相同验证器：数据相同成功，数据不同失败
                            identical: {
                                field: "confirmpwd",
                                message: "密码与确认密码不一致"
                            }
                        }
                    },
                    confirmpwd : {
                        validators: {
                            notEmpty: {
                            },
                            identical: {
                                field: "password",
                                    message: "密码与确认密码不一致"
                            }
                        }
                    },
                    email: {
                        validators: {
                            notEmpty: {
                            },
                            //邮箱地址验证器
                            emailAddress: {
                                message: "邮箱地址有误"
                            }
                        }
                    },
                    birth: {
                        validators: {
                            notEmpty: {
                            },
                            //日期验证器
                            date: {
                                format: "YYYY-MM-DD",
                                message: "日期格式有误"
                            }
                        }
                    },
                    gender: {
                        validators: {
                            notEmpty: {
                            }
                        }
                    },
                    lan: {
                        validators: {
                            notEmpty: {
                            },
                            //选择验证器
                            choice: {
                                min: 2,
                                max: 4,
                                message: "请选择2到4种计算机语言"
                            }
                        }
                    },
                    hobby: {
                        validators: {
                            choice: {
                                min: 2,
                                max: 4,
                                message: "请选择2到4种爱好"
                            }
                        }
                    }
                }
            });
        }
        function doSubmit(){
            //获取验证对象
            var validator = $("#myForm").data('bootstrapValidator');
            //调用验证方法
            validator.validate();
            //然后判断验证是否通过
            if(validator.isValid())
                $("#myForm")[0].submit();
        }
        function clearValidation() {
            $("#myForm").data('bootstrapValidator').resetForm();
        }
    </script>
</head>
<body>
<div class="container" style="width: 350px;margin-top: 20px">
    <form id="myForm" action="abc" method="post">
        <div class="form-group">
            <label>用户名</label>
            <input type="text" name="username" class="form-control"/>
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="text" name="password" class="form-control"/>
        </div>
        <div class="form-group">
            <label>确认密码</label>
            <input type="text" name="confirmpwd" class="form-control"/>
        </div>
        <div class="form-group">
            <label>邮箱</label>
            <input type="text" name="email" class="form-control"/>
        </div>
        <div class="form-group">
            <label>生日</label>
            <input type="date" name="birth" class="form-control"/>
        </div>
        <div class="form-group">
            <label>性别</label>
            <div class="radio">
                <label><input type="radio" name="gender">男性</label>
            </div>
            <div class="radio">
                <label><input type="radio" name="gender">女性</label>
            </div>
        </div>
        <div class="form-group">
            <label>计算机语言</label>
            <div class="checkbox">
                <label><input type="checkbox" name="lan">JAVA</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="lan">C++</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="lan">PHP</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="lan">ruby</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="lan">Javascript</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="lan">python</label>
            </div>
        </div>
        <div class="form-group">
            <label>爱好</label>
            <select name="hobby" class="form-control" multiple>
                <option value="">跑步</option>
                <option value="">游泳</option>
                <option value="">编程</option>
                <option value="">电竞</option>
                <option value="">睡觉</option>
            </select>
        </div>
        <!--<button class="btn btn-danger form-control">表单中的提交按钮</button>-->
    </form>
    <div class="form-group">
        <button class="btn btn-primary form-control" onclick="doSubmit()">提交</button>
    </div>
    <div class="form-group">
        <button class="btn btn-default form-control" onclick="clearValidation()">重置</button>
    </div>
</div>
</body>
</html>